<template>
  <transition name="el-zoom-in-center">
    <div class="jsbos-preview-main">
      <div class="jsbos-common-page-header">
        <el-page-header
          @back="goBack"
          :content="!dataForm.id ? '新建' : isDetail ? '详情' : '编辑'"
        />
        <div class="options">
          <el-button
            type="primary"
            @click="lastSetp()"
            v-if="!isDetail && stepActive > 1"
          >
            上一步
          </el-button>
          <el-button
            type="primary"
            @click="dataFormSubmit()"
            v-if="!isDetail && (stepActive == 1 || stepActive == 2)"
            :disabled="
              stepActive == 2 && dataForm.temsCourseChapterList.length == 0
            "
          >
            保存&下一步
          </el-button>

          <el-button
            type="primary"
            @click="dataFormSubmit()"
            v-if="!isDetail && stepActive == 3"
          >
            保存
          </el-button>

          <el-button
            type="primary"
            @click="dataFormApply()"
            v-if="!isDetail && stepActive == 3"
          >
            发布
          </el-button>
          <el-button @click="goBack"> 取消 </el-button>
        </div>
      </div>
      <el-row
        :gutter="15"
        class="main"
        :style="{ margin: '0 auto', width: '1000px' }"
      >
        <el-form
          ref="elForm"
          :model="dataForm"
          :rules="rules"
          size="small"
          label-width="100px"
          label-position="right"
        >
          <template v-if="!loading">
            <el-col :span="24">
              <el-steps :active="stepActive" finish-status="success" simple>
                <el-step title="基本信息"> </el-step>
                <el-step title="学习内容"> </el-step>
                <el-step title="设置"> </el-step>
                <el-step title="成功"> </el-step>
              </el-steps>
              <div v-if="stepActive == 1" style="margin-top: 20px">
                <el-col :span="24">
                  <el-form-item label="封面" prop="cover">
                    <div style="display: flex; flex-direction: row">
                      <img
                        :src="define.comUrl + dataForm.cover"
                        class="el-upload-list__item-thumbnail"
                        :z-index="10000"
                        ref="image"
                        fit="cover"
                        style="height: 100px; width: 160px"
                      />
                      <div
                        style="
                          margin-left: 20px;
                          line-height: 22px;
                          font-weight: 200;
                        "
                      >
                        <el-button type="primary" @click="openUploadDialog">
                          上传图片
                        </el-button>
                        <!--                        <el-button type="primary" @click="openUploadDialog"> 编辑图片-->
                        <!--                        </el-button>-->
                        <div
                          style="color: #8c8c8c; margin-top: 3px"
                          data-v-0796f1a5=""
                        >
                          封面将按16:9显示
                        </div>
                        <div style="color: #8c8c8c" data-v-0796f1a5="">
                          最佳分辨率：570*322
                        </div>
                        <div style="color: #8c8c8c" data-v-0796f1a5="">
                          支持格式：jpg、jpeg、png
                        </div>
                      </div>
                    </div>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="名称" prop="name">
                    <el-input
                      v-model="dataForm.name"
                      placeholder="请输入"
                      :maxlength="50"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="课程编码" prop="code">
                    <el-input
                      v-model="dataForm.code"
                      placeholder="请输入编号"
                      :maxlength="50"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="课程目录" prop="category">
                    <TreeSelect
                      v-model="dataForm.category"
                      :isChangeFather="false"
                      placeholder="请选择"
                      clearable
                      filterable
                      :options="categoryOptions"
                      :props="categoryProps"
                      style="width: 100%"
                    >
                    </TreeSelect>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="讲师" prop="teacher">
                    <user-select
                      v-model="dataForm.teacher"
                      placeholder="请选择讲师"
                      clearable
                    >
                    </user-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="标签" prop="label">
                    <el-select
                      v-model="dataForm.label"
                      placeholder="请选择标签"
                      clearable
                      :style="{ width: '100%' }"
                      filterable
                      :multiple="true"
                    >
                      <el-option
                        v-for="(item, index) in labelOptions"
                        :key="index"
                        :label="item.fullName"
                        :value="item.enCode"
                        :disabled="item.disabled"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="课程介绍" prop="description">
                    <el-input
                      v-model="dataForm.description"
                      placeholder="请输入课程介绍"
                      :maxlength="200"
                      :style="{ width: '100%' }"
                      true
                      type="textarea"
                      :autosize="{ minRows: 4, maxRows: 4 }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </div>
              <div v-if="stepActive == 2">
                <el-col :span="24">
                  <el-form-item label-width="0" prop="temsCourseChapterList">
                    <div class="jsbos-common-title">
                      <h2>章节内容</h2>
                    </div>
                    <el-table :data="dataForm.temsCourseChapterList">
                      <el-table-column
                        type="index"
                        width="50"
                        label="序号"
                        align="center"
                      />
                      <el-table-column
                        prop="name"
                        label="素材名称"
                        width="0"
                        align="left"
                      >
                        <template slot-scope="scope">
                          <el-link
                            type="primary"
                            :underline="false"
                            @click.native="previewSource(scope.row)"
                            >{{ scope.row.name }}
                          </el-link>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="learningLength"
                        label="学习时长"
                        width="150"
                        align="left"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="fileSize"
                        label="大小"
                        width="80"
                        align="left"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="type"
                        label="类型"
                        width="50"
                        align="center"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="sortCode"
                        label="排序码"
                        width="80"
                        align="center"
                      >
                      </el-table-column>
                      <el-table-column label="操作" width="50" align="center">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="text"
                            class="jsbos-table-delBtn"
                            @click="deltemscoursechapterList(scope.$index)"
                          >
                            删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                    <div
                      class="table-actions"
                      @click="addTemScourseChapterList()"
                    >
                      <el-button type="text" icon="el-icon-plus"
                        >素材选择</el-button
                      >
                    </div>
                  </el-form-item>
                </el-col>
              </div>
              <div v-if="stepActive == 3">
                <el-col :span="24">
                  <el-form-item label-width="0">
                    <groupTitle content-position="left" content="可见范围">
                    </groupTitle>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="可见范围" prop="scope">
                    <el-radio-group v-model="dataForm.scopeType" size="small">
                      <el-radio
                        v-for="(item, index) in scopeOptions"
                        :key="index"
                        :label="item.id"
                        :disabled="item.disabled"
                      >
                        {{ item.fullName }}
                      </el-radio>
                    </el-radio-group>
                    <filterSelect
                      v-if="dataForm.scopeType == 'select'"
                      width="500px"
                      v-model="dataForm.scope"
                    ></filterSelect>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label-width="0">
                    <groupTitle content-position="left" content="文档学习设置">
                    </groupTitle>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="文档学习时长" prop="docsLearningLength">
                    <el-switch
                      v-model="dataForm.docsLearning"
                      :active-value="1"
                      :inactive-value="0"
                    >
                    </el-switch>
                    <el-input-number
                      v-model="dataForm.docsLearningLength"
                      :disabled="!dataForm.docsLearning"
                      style="margin-left: 20px"
                      placeholder="开启"
                      :step="1"
                      :min="0"
                      controls-position="right"
                    >
                    </el-input-number>
                    <ComText
                      :style="{ display: 'inline-block' }"
                      :textStyle="{
                        cursor: 'pointer',
                        color: '#8C8C8C',
                        'font-weight': 'normal',
                        'text-decoration': 'none',
                        'font-size': 12,
                        'line-height': 28,
                        'font-style': 'normal',
                        'text-align': 'left',
                        'margin-left': '20px',
                      }"
                      value="秒/页 如不设置文档学习时长，学员学习文档将不计时长"
                    >
                    </ComText>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label-width="0">
                    <groupTitle content-position="left" content="学习设置">
                    </groupTitle>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="课后作业" prop="homework">
                    <el-input
                      v-model="dataForm.homework.name"
                      placeholder="请输入"
                      :maxlength="50"
                      clearable
                      :style="{ width: '100%' }"
                      @clear="deleteHomework"
                    >
                      <el-button
                        @click="handleHomework"
                        slot="append"
                        icon="el-icon-add"
                        >编辑</el-button
                      >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="14">
                  <el-form-item label="课后考试" prop="homeExam">
                    <popupSelect
                      v-model="dataForm.homeExam"
                      placeholder="请选择"
                      clearable
                      field="homeExam"
                      dataType="customUrl"
                      interfaceUrl="/api/exam/TemsExam/myExamList"
                      customUrlPostType="post"
                      :columnOptions="homeExamcolumnOptions"
                      propsValue="id"
                      relationField="fullName"
                      popupType="dialog"
                      popupTitle="选择数据"
                      popupWidth="800px"
                    >
                    </popupSelect>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="课程评估" prop="evaluation">
                    <el-radio-group v-model="dataForm.evaluation" size="small">
                      <el-radio
                        v-for="(item, index) in evaluationOptions"
                        :key="index"
                        :label="item.id"
                        :disabled="item.disabled"
                      >
                        {{ item.fullName }}
                      </el-radio>
                    </el-radio-group>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="学习资料" prop="learningMaterials">
                    <div class="table-actions">
                      <el-button
                        type="text"
                        icon="el-icon-plus"
                        @click="addMaterialsList()"
                        >资料选择</el-button
                      >
                      <el-button
                        type="text"
                        icon="el-icon-plus"
                        @click="addMaterialsUploadList()"
                        >资料上传</el-button
                      >
                    </div>
                    <el-table :data="dataForm.learningMaterials">
                      <el-table-column
                        type="index"
                        width="50"
                        label="序号"
                        align="center"
                      />
                      <el-table-column
                        prop="name"
                        label="素材名称"
                        width="0"
                        align="left"
                      >
                        <template slot-scope="scope">
                          <el-link
                            type="primary"
                            :underline="false"
                            @click.native="previewSource(scope.row)"
                            >{{ scope.row.name }}
                          </el-link>
                        </template>
                      </el-table-column>
                      <el-table-column
                        prop="fileSize"
                        label="大小"
                        width="80"
                        align="left"
                      >
                      </el-table-column>
                      <el-table-column
                        prop="type"
                        label="类型"
                        width="50"
                        align="center"
                      >
                      </el-table-column>
                      <el-table-column label="操作" width="50" align="center">
                        <template slot-scope="scope">
                          <el-button
                            size="mini"
                            type="text"
                            class="jsbos-table-delBtn"
                            @click="delMaterialsList(scope.$index)"
                          >
                            删除
                          </el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label-width="0">
                    <groupTitle content-position="left" content="学习奖励">
                    </groupTitle>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="学时" prop="learningPeriod">
                    <el-input-number
                      v-model="dataForm.learningPeriod"
                      placeholder="数字文本"
                      :max="100"
                      :step="1"
                      :min="0"
                      :precision="0"
                      controls-position="right"
                    >
                    </el-input-number>
                    <ComText
                      :style="{ display: 'inline-block' }"
                      :textStyle="{
                        cursor: 'pointer',
                        color: '#8C8C8C',
                        'font-weight': 'normal',
                        'text-decoration': 'none',
                        'font-size': 12,
                        'line-height': 28,
                        'font-style': 'normal',
                        'text-align': 'left',
                        'margin-left': '20px',
                      }"
                      value="完成课程后才能获得此学时，不填则表示无学时"
                    >
                    </ComText>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="学分" prop="learningCredit">
                    <el-input-number
                      v-model="dataForm.learningCredit"
                      placeholder="数字文本"
                      :max="100"
                      :step="1"
                      :min="0"
                      :precision="0"
                      controls-position="right"
                    >
                    </el-input-number>
                    <ComText
                      :style="{ display: 'inline-block' }"
                      :textStyle="{
                        cursor: 'pointer',
                        color: '#8C8C8C',
                        'font-weight': 'normal',
                        'text-decoration': 'none',
                        'font-size': 12,
                        'line-height': 28,
                        'font-style': 'normal',
                        'text-align': 'left',
                        'margin-left': '20px',
                      }"
                      value="完成课程后才能获得此学分，不填则表示无分"
                    >
                    </ComText>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="积分" prop="learningIntegral">
                    <el-input-number
                      v-model="dataForm.learningIntegral"
                      placeholder="数字文本"
                      :max="99"
                      :step="1"
                      :min="0"
                      controls-position="right"
                    >
                    </el-input-number>
                    <ComText
                      :style="{ display: 'inline-block' }"
                      :textStyle="{
                        cursor: 'pointer',
                        color: '#8C8C8C',
                        'font-weight': 'normal',
                        'text-decoration': 'none',
                        'font-size': 12,
                        'line-height': 28,
                        'font-style': 'normal',
                        'text-align': 'left',
                        'margin-left': '20px',
                      }"
                      value="完成课程后才能获得此积分，不填则表示无积分"
                    >
                    </ComText>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label-width="0">
                    <groupTitle content-position="left" content="防作弊">
                    </groupTitle>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="倍速播放" prop="preventionDsp">
                    <el-switch
                      v-model="dataForm.preventionDsp"
                      :active-value="1"
                      :inactive-value="0"
                    >
                    </el-switch>
                    <ComText
                      :style="{ display: 'inline-block' }"
                      :textStyle="{
                        cursor: 'pointer',
                        color: '#8C8C8C',
                        'font-weight': 'normal',
                        'text-decoration': 'none',
                        'font-size': 12,
                        'line-height': 32,
                        'font-style': 'normal',
                        'text-align': 'left',
                        'margin-left': '20px',
                      }"
                      value="开启后，学员观看视频可以选择倍速播放且倍速播放时学习时长也倍速计算（举例：学员2倍速学习5分钟，学习时长计算10分钟）"
                    >
                    </ComText>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="进度条拖动" prop="preventionDpb">
                    <el-switch
                      v-model="dataForm.preventionDpb"
                      :active-value="1"
                      :inactive-value="0"
                    >
                    </el-switch>
                    <ComText
                      :style="{ display: 'inline-block' }"
                      :textStyle="{
                        cursor: 'pointer',
                        color: '#8C8C8C',
                        'font-weight': 'normal',
                        'text-decoration': 'none',
                        'font-size': 12,
                        'line-height': 32,
                        'font-style': 'normal',
                        'text-align': 'left',
                        'margin-left': '20px',
                      }"
                      value="进度条拖动  开启开启后，观看音视频课程时可拖动播放进度条"
                    >
                    </ComText>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="防挂机" prop="preventionHp">
                    <el-switch
                      v-model="dataForm.preventionHp"
                      :active-value="1"
                      :inactive-value="0"
                    >
                    </el-switch>
                    <ComText
                      :style="{ display: 'inline-block' }"
                      :textStyle="{
                        cursor: 'pointer',
                        color: '#8C8C8C',
                        'font-weight': 'normal',
                        'text-decoration': 'none',
                        'font-size': 12,
                        'line-height': 28,
                        'font-style': 'normal',
                        'text-align': 'left',
                        'margin-left': '20px',
                      }"
                      value="开启后，每"
                    >
                    </ComText>
                    <el-input-number
                      v-model="dataForm.preventionHpMinute"
                      :disabled="!dataForm.preventionHp"
                      placeholder="数字文本"
                      :min="0"
                      :max="99"
                      :step="1"
                      controls-position="right"
                    >
                    </el-input-number>

                    <ComText
                      :style="{ display: 'inline-block' }"
                      :textStyle="{
                        cursor: 'pointer',
                        color: '#8C8C8C',
                        'font-weight': 'normal',
                        'text-decoration': 'none',
                        'font-size': 12,
                        'line-height': 28,
                        'font-style': 'normal',
                        'text-align': 'left',
                      }"
                      value="分钟，系统会定时进行挂机检测"
                    >
                    </ComText>
                  </el-form-item>
                </el-col>
              </div>
            </el-col>
          </template>
        </el-form>
      </el-row>
      <SelectSource
        v-if="selectSourceVisible"
        tabActiveName="select"
        ref="selectSourceRef"
        @selectComplete="selectCompleteSource"
      >
      </SelectSource>
      <SelectSource
        v-if="selectMaterialsVisible"
        :tabActiveName="MaterialsType"
        ref="selectMaterialsRef"
        @selectComplete="selectCompleteMaterials"
      >
      </SelectSource>
      <SelectCover
        v-if="selectCoverVisible"
        ref="selectCoverRef"
        @selectComplete="selectCover"
      >
      </SelectCover>
      <HomeworkForm
        v-if="homeworkFormVisible"
        ref="homeworkForm"
        @refresh="selectComplete"
      ></HomeworkForm>
      <Preview :visible.sync="previewVisible" :file="activeFile" />
    </div>
  </transition>
</template>
<script>
import SelectSource from "@/views/tems/source/manager/SelectSource";
import SelectCover from "@/views/tems/course/cover/Form";
import request from "@/utils/request";
import SingleImg from "@/components/upload/SingleImg";
import Preview from "@/components/Generator/components/Upload/Preview";
import FilterSelect from "@/components/Generator/components/filterSelect/index";
import HomeworkForm from "../homework/Form.vue";

export default {
  components: {
    SingleImg,
    SelectSource,
    SelectCover,
    Preview,
    FilterSelect,
    HomeworkForm,
  },
  props: [],
  data() {
    return {
      activeFile: {},
      previewVisible: false,
      selectSourceVisible: false,
      selectMaterialsVisible: false,
      MaterialsType: "select",
      selectCoverVisible: false,
      visible: false,
      loading: false,
      isDetail: false,
      homeworkFormVisible: false,
      stepActive: 1,
      scopeJson: [],
      dataForm: {
        cover:
          "/api/file/Image/annexpic/2024/09/12/course/20240912_604038225870211525.png",
        name: "",
        code: "",
        category: "",
        teacher: "",
        label: [],
        description: "",
        creatorUserId: "",
        creatorTime: "",
        scopeType: "all",
        scope: [],
        docsLearning: 0,
        docsLearningLength: "",
        homework: "",
        homeExam: "",
        evaluation: "1",
        learningMaterials: [],
        learningPeriod: 0,
        learningCredit: 0,
        learningIntegral: 0,
        preventionDsp: 0,
        preventionDpb: 0,
        preventionHp: 0,
        preventionHpMinute: 1,
        enabledMark: 10,
        temsCourseChapterList: [],
      },
      activetnlqtg: "0",
      rules: {
        name: [
          {
            required: true,
            message: "请输入课程名称",
            trigger: "blur",
          },
        ],
      },
      rulesCourseChapter: {
        temsCourseChapterList: [
          {
            required: true,
            message: "请选择素材上传章节内容",
            trigger: "blur",
          },
        ],
      },

      categoryOptions: [],
      categoryProps: { children: "children", label: "name", value: "id" },
      labelOptions: [],
      scopeOptions: [
        { fullName: "全公司", id: "all" },
        { fullName: "仅创建人", id: "creator" },
        {
          fullName: "指定人员",
          id: "select",
        },
      ],
      homeExamcolumnOptions: [
        {
          label: "名称",
          value: "fullName",
        },
        {
          label: "开始时间",
          value: "startDatetime",
        },
        {
          label: "截至时间",
          value: "endDatetime",
        },
      ],
      evaluationOptions: [
        { fullName: "星评", id: "1" },
        { fullName: "评估表", id: "2" },
      ],
      preventionDspOptions: [{ fullName: "开启", id: "1" }],
      preventionDpbOptions: [{ fullName: "开启", id: "1" }],
      preventionHpOptions: [{ fullName: "开启", id: "1" }],
      enabledMarkOptions: [
        { fullName: "待发布", id: 10 },
        { fullName: "已发布", id: 20 },
      ],
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getCategoryOptions();
    this.getLabelOptions();
  },
  mounted() {},
  methods: {
    openUploadDialog() {
      this.selectCoverVisible = true;
      this.$nextTick(() => {
        this.$refs.selectCoverRef.initData();
      });
    },
    previewSource(item) {
      this.activeFile = JSON.parse(item.fileJson);
      this.previewVisible = true;
    },
    temscoursechapterExist() {
      let isOk = true;
      if (this.dataForm.temsCourseChapterList.length == 0) return false;
      return isOk;
    },
    getCategoryOptions() {
      request({
        url: "/api/course/TemsCourseCatalog/Selector",
        method: "get",
      }).then((res) => {
        let topItem = {
          name: "全部",
          hasChildren: true,
          id: "-1",
          children: res.data.list,
        };
        this.categoryOptions = [topItem];
      });
    },
    getLabelOptions() {
      this.$store
        .dispatch("base/getDictionaryData", {
          encode: "CoureseMark",
        })
        .then((res) => {
          this.labelOptions = res;
        });
    },
    goBack() {
      this.$emit("refresh");
    },
    clearData(data) {
      for (let key in data) {
        if (data[key] instanceof Array) {
          data[key] = [];
        } else if (data[key] instanceof Object) {
          this.clearData(data[key]);
        } else {
          data[key] = "";
        }
      }
      this.dataForm.scope = [];
      this.dataForm.scopeType = "all";
      this.dataForm.cover =
        "/api/file/Image/annexpic/2024/09/12/course/20240912_604038225870211525.png";
    },
    init(id, isDetail) {
      this.dataForm.id = id || 0;
      this.visible = true;
      this.isDetail = isDetail || false;
      this.$nextTick(() => {
        this.$refs["elForm"].resetFields();
        if (this.dataForm.id) {
          this.loading = true;
          request({
            url: "/api/course/TemsCourse/" + this.dataForm.id,
            method: "get",
          }).then((res) => {
            this.dataInfo(res.data);
            this.loading = false;
          });
        } else {
          this.clearData(this.dataForm);
        }
      });
      this.$store.commit("generator/UPDATE_RELATION_DATA", {});
    },
    // 表单提交
    dataFormSubmit() {
      this.dataForm.enabledMark = 10;
      if (this.stepActive == 2) {
        this.rules = this.rulesCourseChapter;
      }
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          if (!this.temscoursechapterExist() && this.stepActive == 2) return;
          this.request();
          this.nextSetp();
        }
      });
    },
    dataFormApply() {
      this.dataForm.enabledMark = 20;
      this.$refs["elForm"].validate((valid) => {
        if (valid) {
          if (!this.temscoursechapterExist()) return;
          this.request();
          this.nextSetp();
        }
      });
    },
    handleHomework() {
      this.homeworkFormVisible = true;
      this.$nextTick(() => {
        this.$refs.homeworkForm.init(
          this.dataForm.id,
          this.dataForm.homework.id
        );
      });
    },
    selectComplete(data) {
      this.dataForm.homeworkId = data.id;
      this.dataForm.homework = data;
    },
    deleteHomework() {
      this.dataForm.homeworkId = "";
    },
    nextSetp() {
      this.stepActive = this.stepActive + 1;
    },
    lastSetp() {
      this.stepActive = this.stepActive - 1;
    },
    request() {
      var _data = this.dataList();
      if (!this.dataForm.id) {
        request({
          url: "/api/course/TemsCourse",
          method: "post",
          data: _data,
        }).then((res) => {
          if (res.data.id) {
            this.dataForm.id = res.data.id;
          }
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              if (this.stepActive == 4) {
                this.visible = false;
                this.$emit("refresh", true);
              }
            },
          });
        });
      } else {
        request({
          url: "/api/course/TemsCourse/" + this.dataForm.id,
          method: "PUT",
          data: _data,
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: "success",
            duration: 1000,
            onClose: () => {
              if (this.stepActive == 4) {
                this.visible = false;
                this.$emit("refresh", true);
              }
            },
          });
        });
      }
    },
    selectCover(coverUlr) {
      this.dataForm.cover = coverUlr;
    },
    selectCompleteSource(val) {
      let data = [...new Set(this.dataForm.temsCourseChapterList.concat(val))];
      let map = new Map();
      for (const datum of data) {
        if (!map.has(datum.id)) {
          map.set(datum.id, datum);
        }
      }
      this.dataForm.temsCourseChapterList = [...map.values()];
    },
    addTemScourseChapterList() {
      this.selectSourceVisible = true;
      this.$nextTick(() => {
        this.$refs.selectSourceRef.initData();
      });
    },
    deltemscoursechapterList(index) {
      this.dataForm.temsCourseChapterList.splice(index, 1);
    },
    addMaterialsList() {
      this.selectMaterialsVisible = true;
      this.$nextTick(() => {
        this.$refs.selectMaterialsRef.initData();
      });
    },
    addMaterialsUploadList() {
      this.MaterialsType = "upload";
      this.addMaterialsList();
    },

    delMaterialsList(index) {
      this.dataForm.learningMaterials.splice(index, 1);
    },
    selectCompleteMaterials(val) {
      let data = [...new Set(this.dataForm.learningMaterials.concat(val))];
      let map = new Map();
      for (const datum of data) {
        if (!map.has(datum.id)) {
          map.set(datum.id, datum);
        }
      }
      this.dataForm.learningMaterials = [...map.values()];
    },
    scopeFormat(data) {
      let scope = {};
      let organizesArr = [];
      data.forEach((item, index) => {
        if (item.type == "company" || item.type == "department") {
          organizesArr = organizesArr.concat(item.selectArr);
        }
        if (item.type == "Role") {
          scope.scopeRoles = item.selectArr.join(",");
        }
        if (item.type == "Position") {
          scope.scopePositions = item.selectArr.join(",");
        }
        if (item.type == "Group") {
          scope.scopeGroups = item.selectArr.join(",");
        }
        if (item.type == "user") {
          scope.scopeUsers = item.selectArr.join(",");
        }
        if (item.type == "exclude") {
          scope.scopeExcludeUsers = item.selectArr.join(",");
        }
      });
      scope.scopeOrganizes = organizesArr.join(",");
      return scope;
    },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      let scopeFormatProperties = this.scopeFormat(_data.scope);
      _data.cover = _data.cover;
      _data.label = JSON.stringify(_data.label);
      _data.scope = JSON.stringify(_data.scope);

      _data.scopeOrganizes = scopeFormatProperties.scopeOrganizes;
      _data.scopeGroups = scopeFormatProperties.scopeGroups;
      _data.scopeRoles = scopeFormatProperties.scopeRoles;
      _data.scopePositions = scopeFormatProperties.scopePositions;
      _data.scopeUsers = scopeFormatProperties.scopeUsers;
      _data.scopeExcludeUsers = scopeFormatProperties.scopeExcludeUsers;

      _data.docsLearning = parseInt(_data.docsLearning);
      _data.learningMaterials = JSON.stringify(_data.learningMaterials);
      _data.preventionDsp = parseInt(_data.preventionDsp);
      _data.preventionDpb = parseInt(_data.preventionDpb);
      _data.preventionHp = parseInt(_data.preventionHp);
      for (let i = 0; i < _data.temsCourseChapterList.length; i++) {
        var _list = _data.temsCourseChapterList[i];
      }
      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll;
      _dataAll.cover = _dataAll.cover;
      if (!_dataAll.homework) {
        _dataAll.homework = { name: "" };
      }
      _dataAll.cover = _dataAll.cover;
      _dataAll.label = JSON.parse(_dataAll.label);
      _dataAll.scope = JSON.parse(_dataAll.scope);
      _dataAll.docsLearning = parseInt(_dataAll.docsLearning);
      _dataAll.learningMaterials = JSON.parse(_dataAll.learningMaterials);
      _dataAll.preventionDsp = parseInt(_dataAll.preventionDsp);
      _dataAll.preventionDpb = parseInt(_dataAll.preventionDpb);
      _dataAll.preventionHp = parseInt(_dataAll.preventionHp);
      for (let i = 0; i < _dataAll.temsCourseChapterList.length; i++) {
        var _list = _dataAll.temsCourseChapterList[i];
      }
      this.dataForm = _dataAll;
    },
  },
};
</script>
